<template>
	<view class="cloummStart defultBackground pall20 gap10" @click="onclick">
		<view class="rowSpaceBetween w100">
			<view class="rowStart gap20">
				<uv-icon :name="leftIcon" v-if="leftIcon" size="28" color="#404040"></uv-icon>
				<view class="cloummStart alignStart gap20" style="line-height: 20rpx;">
					{{title}}
					<view class="desc rowStart w100 titleH3 tipsText" v-if="desc">
						{{desc}}
					</view>
				</view>
			</view>
			<view class="rowStart gap10" style="align-items: end;">
				<view class="cardUnit" v-if="rightText">
					{{rightText}}
				</view>
				<uv-icon :name="rightIcon"></uv-icon>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "ListTitle",
		props: {
			title: {
				type: String,
				default: '标题'
			},
			desc: {
				type: String,
				default: ''
			},
			leftIcon: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			},
			rightIcon: {
				type: String,
				default: 'arrow-right'
			},
		},
		data() {
			return {

			};
		},
		methods: {
			onclick() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss">
	.desc {
		font-size: 20rpx;
	}
</style>